iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

學習 HTML / CSS 遇到的問題 系列 第 9

關於 table 表格(二)

  • 分享至 

  • xImage
  •  

因較少使用到因此在這邊補充紀錄一下~

table 跨欄、列

<th> <td> 可在開始標籤處使用 colspan 和 rowspan 屬性將儲存格跨欄、列

colspan 可看成 col span,有「欄 」「延伸」的意思,rowspan 也是

colspan 和 rowspan 屬性值會是數字,例如:colspan="3" ,此儲存格就會跨三欄,若沒有設定 colspan 屬性預設會是 1,若將 colspan 屬性值超過 1000 會被視為預設值 1

rowspan 的值被設為 0 時代表該儲存格可以延伸到整個表格的最後

示意範例

長表格

較長的表格內容可以使用 來表示表格的表頭、主內容及表尾,整體結構會更清楚,也能讓讀屏軟體的使用者更好閱讀

可參考 bootstrap 的 table 範例,包含 和

示意範例

也可以使用來規劃表格,看起來蠻方便的XD
Table Tag Generator | rowspan? colspan? You don’t need to worry about them!

參考資料:
HTML&CSS:網站設計建置優化之道
Tables · Bootstrap v4.5
The Table Data Cell element - HTML: Hypertext Markup Language | MDN
HTML td rowspan Attribute


上一篇
關於 table 表格
下一篇
<input> - type 屬性
系列文
學習 HTML / CSS 遇到的問題 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言